<template>
  <view class="task">
    <!-- <view class="task-tag">
			<image :src="getImgSrc('/hall/img_home_hot@2x.png')" class="hot"></image>
			<view class="task-tag-text">加急</view>
		</view> -->
    <view class="task-header">
      <view class="task-type">{{data.serviceType === 1 ? "取件" : "送件"}}</view>
      <!-- <view class="task-requirement" v-if="data.require > 0"
        >要求<text>{{ data.require }}</text
        >分钟内完成，预计赏金收入<text>{{ data.fee }}</text
        >元</view
      > -->
			
			<view class="task-requirement" v-if="Number(process) === 4"
			  >已完成，赏金收入<text>{{ data.fee }}</text
			  >元</view
			>
			<view class="task-requirement" v-else-if="data.require > 0"
        >本单预计赏金收入<text>{{ data.fee }}</text
        >元，如遇实际情况不符，请联系客户取消任务订单</view
      >
      <!-- <view class="task-requirement timeout" v-else-if="data.require < 0"
        >已超时<text>{{ -data.require }}</text
        >分钟，预计赏金收入<text>{{ data.fee }}</text
        >元</view
      > -->
			<view class="task-requirement timeout" v-else-if="data.require < 0"
        >已历时<text>60</text
        >分钟，预计赏金收入<text>{{ data.fee }}</text
        >元，异常状态<text>{{ -data.require }}</text
        >分钟，请尽快完成</view
      >
      <view class="task-requirement" v-else
        >本单预计赏金收入<text>{{ data.fee }}</text
        >元，如遇实际情况不符，请联系客户取消任务订单</view
      >
    </view>
    <view class="task-body">
      <view class="task-address" v-if="data.serviceType === 1">
        <view class="task-take">
          <text class="task-icon">始</text>
          <text class="task-addr">{{ data.addr1 }}</text>
        </view>
        <view class="task-receive">
          <text class="task-icon">终</text>
          <text class="task-addr">{{ data.addr2 }}</text>
        </view>
      </view>
      <view class="task-address" v-else>
        <view class="task-take">
          <text class="task-icon">始</text>
          <text class="task-addr">{{ data.addr1 }}</text>
        </view>
        <view class="task-receive">
          <text class="task-icon">终</text>
          <text class="task-addr">{{ data.addr2 }}</text>
        </view>
      </view>
      <view class="task-info">
        <view class="task-category">
          <view v-if="process === '2' || process === '3'">用户姓名:&nbsp;{{ data.name }}</view>
          <view v-if="process === '2' || process === '3'">用户电话:&nbsp;<a @tap="triggerToCall">&nbsp;{{ data.tel }}</a></view>
          <view v-if="data.deliveryFlg"
            >需寄件：{{
              data.logisticsFlg
                ? `指定快递为${data.logisticsName}`
                : "快递公司不限"
            }}</view
          >
          <view>类型：{{ (data.goodsTypeList || []).join(" ") }}</view>
          <view>难度系数/kg：{{ data.weight ? data.weight : "-" }}</view>
          <view>备注：{{ data.remark }}</view>
          <view v-if="data.code">取件码/确认码：{{ data.code }}</view>
          <view>站点联系人：{{ data.sitePersonInCharge || '-' }}</view>
          <view>站点电话：{{ data.siteMobile || '-' }}</view>
        </view>
      </view>
    </view>
    <view class="task-footer">
      <button class="task-use" v-if="process === '1'" @tap="beforeReceiveOrder">
        立即抢单
      </button>

      <button
        v-if="process === '2'"
        class="task-use task-upload"
				style="width: 180px;"
        @tap="triggerToUpload"
      >
        上传凭证/照片
      </button>
      <button
        class="task-use task-upload"
        v-if="process === '3'"
        @tap="triggerToConfirmReceived"
      >
        确认完成
      </button>
    </view>

    <template>
      <u-modal
        v-model="show"
        :show-title="false"
        :show-confirm-button="false"
        :show-cancel-button="false"
      >
        <view class="slot-content">
          <view class="task-modal">
            <image
              class="task-modal-icon"
              :src="getImgSrc('/hall/icon_close@2x.png')"
              @tap="
                show = false;
                password = '';
              "
            />
            <view class="task-modal-head">请输入当前任务验收码</view>
            <view class="task-modal-body">
              <password-input
                ref="password"
                @submit="complete"
              ></password-input>
              <view class="task-modal-desc">密码为4位数字</view>
              <button class="task-use" @tap="verifyPassword">确定</button>
            </view>
          </view>
        </view>
      </u-modal>
    </template>

    <template>
      <u-modal
        v-model="confirmModal"
        :show-title="false"
        :show-confirm-button="false"
        :show-cancel-button="false"
      >
        <view class="slot-content">
          <view class="task-modal">
            <image
              class="task-modal-icon"
              :src="getImgSrc('/hall/icon_close@2x.png')"
              @tap="confirmModal = false"
            />
            <view class="task-modal-head">确认完成后不可撤销！</view>
            <view class="task-modal-body">
              <view class="task-modal-desc concat"
                >确认完成并已联系用户</view
              >
              <!-- <input
                v-model="over.logisticsName"
                class="task-modal-input"
                placeholder="请输入快递公司（必填）"
                placeholder-class="task-modal-place"
              />
              <input
                v-model="over.logisticsCode"
                class="task-modal-input"
                placeholder="请输入快递单号（必填）"
                placeholder-class="task-modal-place"
              /> -->
              <textarea
                v-model="over.message"
                class="task-modal-area"
                placeholder="请输入订单备注（选填）"
                placeholder-class="task-modal-place"
              />
              <button class="task-use" @tap="triggerToService">确定完成</button>
            </view>
          </view>
        </view>
      </u-modal>
    </template>
  </view>
</template>

<script>
import passwordInput from "@/components/keyboard/password-input.vue";
import { call } from "@/common/location.js";

export default {
  name: "task",
  components: {
    passwordInput,
  },
  props: {
    currentStatus: {
      type: String,
    },
    data: {
      type: Object,
      required: true,
    },
    currentSite: {
      type: String,
      required: true,
    },
    process: {
      // 1新任务  2待取货  3配送中
      type: String,
      validator: (value) => {
        return value !== "1" && value !== "2" && value !== "3" && value !== "4"
          ? false
          : true;
      },
    },
  },
  data() {
    return {
      show: false,
      password: "",
      confirmModal: false,
      over: {
        logisticsCode: "",
        logisticsName: "",
        memo: "",
      },
    };
  },
  watch: {
    show(newVal, oldValue) {
      if (!newVal) {
        this.$refs.password.close();
      } else {
        setTimeout(() => {
          this.$refs.password.open();
        }, 100);
      }
    },
  },
  onLoad() {},
  methods: {
    // 确认送达
    triggerToConfirmReceived() {
			console.log(this.data)
      if (this.data.serviceType === 1) {
        // 取件，已经上传了货品，还需要校验取件码
        this.triggerToVerifyCode();
      } else {
        this.over.logisticsName = this.data.logisticsName;
        // 送件，直接确认送达
        this.triggerToOpenConfirmModal();
      }
    },
    // 打开确认送达弹窗
    triggerToOpenConfirmModal() {
      this.confirmModal = true;
    },
    // 打开校验弹窗
    triggerToVerifyCode() {
      this.show = true;
    },
    triggerToUploadPhoto() {
      const { tradeNo, serviceType } = this.data;
      uni.navigateTo({
        url: `/pages/sys/home/task-upload?no=${tradeNo}&code=${
          this.password || undefined
        }&type=${serviceType}`,
      });
    },
    triggerToCall() {
      const tel = this.data.tel;
      if (!tel) {
        uni.showToast({
          title: "未设置电话号码, 呼叫失败",
          icon: "none",
        });
        return;
      }
      uni.showModal({
        title: "提示",
        content: "是否呼叫用户",
        success: function (res) {
          if (res.cancel) {
            return;
          }
          call(tel);
        },
      });
    },
    triggerToUpload() {
      if (this.data.serviceType === 1) {
        // 取件先上传货品，直接进行订单流转
        this.triggerToUploadPhoto();
      } else {
        // 送件类型先校验，再上传货品照片
        this.triggerToVerifyCode();
      }
    },
    beforeReceiveOrder() {
      const self = this;
      uni
        .showModal({
          content: "确认接单",
          confirmText: "确认",
        })
        .then((res) => {
          if (res[1]["confirm"]) {
            self.receiveOrder();
          }
        });
    },
    async receiveOrder() {
      const { tradeNo } = this.data;
      const { currentSite, currentStatus } = this;
      if (currentStatus === "0") {
        uni.showToast({
          title: "当前为离线状态，无法抢单",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      const data = await this.$u.api.invokeHallTaskBySite({
        siteId: currentSite,
        no: tradeNo,
      });
      if (data.code === 200) {
        uni.showToast({
          title: "抢单成功，请到待取货列表中查看任务",
          duration: 2000,
          icon: "none",
        });
        await new Promise((r) => setTimeout(r, 2000));
        this.$emit("onRefresh");
        return;
      } else {
        uni.showToast({
          title: data.message,
          icon: "none",
          duration: 1000,
        });
      }
    },
    complete(p) {
      this.password = p;
    },
    async triggerToService() {
      const { tradeNo, serviceType } = this.data;
      const res = await this.$u.api.invokeHallTaskConfirmReceived({
        ...this.over,
        no: tradeNo,
        code: serviceType === 0 ? undefined : this.password,
      });

      if (res.code !== 200) {
        uni.showToast({
          title: res.message,
          icon: "none",
          duration: 1000,
        });
        return;
      } else {
        uni.showToast({
          title: "操作成功",
          icon: "none",
          duration: 1000,
        });
      }
      await new Promise((r) => setTimeout(r, 2000));
      this.$emit("onRefresh");
    },
    async verifyPassword() {
      const { tradeNo, serviceType } = this.data;
      const data = await this.$u.api.invokeHallTaskValidCode({
        no: tradeNo,
        code: this.password,
      });
      if (data.code === 200 && data.data) {
        this.show = false;
        if (serviceType === 1) {
          // 取件::已完成
          this.confirmModal = true;
        } else {
          // 送件::上传照片
          this.triggerToUploadPhoto();
        }
      } else {
        uni.showToast({
          title: "收货码错误",
          icon: "none",
          duration: 1000,
        });
        this.$refs.password.reset();
        this.password = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.task {
  margin: 0 auto 30rpx;
  width: 670rpx;
  background: #f6f7fb;
  border: 1px solid #eaeaea;
  border-radius: 19rpx;
  padding: 35rpx 20rpx 30rpx 44rpx;
  position: relative;

  &-tag {
    position: absolute;
    right: -18rpx;
    top: -25rpx;
    width: 145rpx;
    height: 79rpx;

    .hot {
      position: absolute;
      top: 0;
      left: 0;
      width: 145rpx;
      height: 79rpx;
    }

    &-text {
      padding: 37rpx 0 0 31rpx;
      position: relative;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 29rpx;
      z-index: 9;
    }
  }

  &-header {
  }

  &-type {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #282828;
    line-height: 40rpx;
    margin-bottom: 30rpx;
  }

  &-requirement {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #fc801c;
    line-height: 36rpx;
    &.timeout {
      color: #ee3b32;
    }
    text {
      padding: 0 6rpx;
    }
  }

  &-category {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4b4b4b;
    line-height: 50rpx;
    a {
      margin-left: .5em;
      color: #4675f6;
    }
  }

  &-address {
    border-top: 1rpx #eaeaea solid;
    border-bottom: 1rpx #eaeaea solid;
    padding: 28rpx 0 2rpx;
    margin: 29rpx 0 0rpx;
  }

  &-icon {
    margin-right: 16rpx;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    width: 40rpx;
    height: 40rpx;
    min-width: 40rpx;
    border-radius: 8rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 38rpx;
  }

  &-take {
    display: flex;
    align-items: center;
    margin-bottom: 28rpx;

    .task-icon {
      background: #4e95fc;
    }
  }

  .task-addr {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; //多行在这里修改数字即可
    overflow: hidden;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
  }
  &-receive {
    display: flex;
    align-items: center;
    margin-bottom: 28rpx;

    .task-icon {
      background: #ffca3b;
    }
  }

  &-use {
    margin: 35rpx auto 0;
    width: 280rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #4aabf6, #4675f6);
    box-shadow: 0rpx 16rpx 30rpx 0rpx rgba(74, 169, 246, 0.2);
    border-radius: 40rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 80rpx;
    color: #ffffff;
  }

  &-upload {
  }

  .task-modal {
    width: 600rpx;
    padding-bottom: 60rpx;
    // height: 480rpx;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;
    text-align: center;

    &-icon {
      position: absolute;
      height: 37rpx;
      width: 36rpx;
      right: 38rpx;
      top: 40rpx;
    }

    &-head {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #4b4b4b;
      line-height: 40rpx;
      margin-bottom: 60rpx;
      padding-top: 57rpx;
    }

    &-body {
      .concat {
        margin-bottom: 46rpx;
      }
    }

    &-desc {
      margin-top: 23rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #4b4b4b;
      line-height: 40rpx;
    }

    &-area {
      text-align: left;
      padding: 22rpx 21rpx;
      box-sizing: border-box;
      width: 491rpx;
      height: 141rpx;
      background: #ffffff;
      border: 1rpx solid #d4d4d4;
      border-radius: 10px;
      margin: 0 auto;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 28rpx;
    }

    &-input {
      text-align: left;
      padding: 32rpx 25rpx;
      box-sizing: border-box;
      width: 491rpx;
      height: 91rpx;
      background: #ffffff;
      border: 1rpx solid #d4d4d4;
      border-radius: 10px;
      margin: 0 auto 29rpx;

      /deep/.uni-input-input {
        height: 28rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 28rpx;
      }
    }

    &-place {
      text-align: left;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b5b5b5;
      line-height: 28rpx;
    }
  }
}
</style>
